<template>
 <div class="yingmoo-media">
   <ym-header></ym-header>
   <ym-medianav></ym-medianav>
   <ym-secondnav></ym-secondnav>
   

    <div class="ym-lunbo">
      <el-carousel indicator-position="inside">
        <el-carousel-item v-for="(v,i) in banners" :key="i">
          <img :src="v.imgpath" />
        </el-carousel-item>
      </el-carousel>
    </div>
<!--  精选媒体  -->
    <div class="yingmoo-template-model">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">精选媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
        <p class="column-citys">
          <span>北京</span>
          <span>上海</span>
          <span>广州</span>
          <span>深圳</span>
          <span>更多</span>
        </p>
      </div>
      <div class="column-content">
      	<ul>
      		<li class="media-model" style="float:left; margin:8px;" v-for="n in list1">
		        <dl>
		          <dt>
		            <img width="222px" height="198px" :src="n.imgpath" />
		          </dt>
		          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		          <dd class="media-text-secend">￥{{n.price}}</dd>
		          <dd class="media-text-city">{{n.remark}}</span></dd>
		        </dl>      			
      		</li>
      	</ul>
      </div>
    </div>
<!--  热门媒体  -->
    <div class="yingmoo-template">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">热门媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
      	<ul>
      		<li class="media-model" style="float:left; margin:8px;" v-for="n in list2">
		        <dl>
		          <dt>
		            <img width="222px" height="198px" :src="n.imgpath" />
		          </dt>
		          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		          <dd class="media-text-secend">￥{{n.price}}</dd>
		          <dd class="media-text-city"><span>{{n.remark}}</span></dd>
		        </dl>
		    </li>
		</ul>
      </div>
    </div>
<!--  最新媒体  -->
    <div class="yingmoo-template">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">最新媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
      	<ul>
      		<li class="media-model" style="float:left; margin:8px;" v-for="n in list3">
		        <dl>
		          <dt>
		            <img width="222px" height="198px" :src="n.imgpath" />
		          </dt>
		          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		          <dd class="media-text-secend">￥{{n.price}}</dd>
		          <dd class="media-text-city"><span>{{n.remark}}</span></dd>
		        </dl>
      		</li>
      	</ul>
      </div>
    </div>
<!--  机场专区馆  -->
   <div class="yingmoo-airport">
     <img src="../assets/ym-media/airports.png" class="airports" />
     <div class="airport-model">
       <img v-for="v in list4" :src="v.imgpath" class="airport-map" />
       <div class="airport-pictures">
         <img width="286px" height="191px" v-for="n in list5" :src="n.imgpath" />
         <!--<img src="../assets/ym-media/airport-picture.png" />
         <img src="../assets/ym-media/airport-picture.png" />
         <img src="../assets/ym-media/airport-picture.png" />-->
       </div>
     </div>
   </div>
    <ym-footer></ym-footer>
 </div>
</template>
<script>
  import ymHeader from "@/components/ymHeader.vue";
  import ymMedianav from "@/components/ymMedianav.vue";
  import ymFooter from "@/components/ymFooter.vue";
  import ymSecondnav from "@/components/ymSecondnav.vue";
  export default {
    name: "yingmoo-media",
    components: {
      ymHeader,
      ymMedianav,
      ymSecondnav,
      ymFooter
    },
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        /* banner数据，方便修改 */
        banners: [{
          imgUrl: require('@/assets/ym-media/media-lunbo-airport.png')
        }, {
          imgUrl: require('@/assets/ym-media/media-lunbo-airport.png')
        }, {
          imgUrl: require('@/assets/ym-media/media-lunbo-airport.png')
        }],
        model: [{
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }, {
          modeltext: '媒体名称媒体名称媒体名称',
          modelmoney: '价格：120万 元/年',
          modelcity: '北京西站',
          modellook: '看板'
        }],
        list1:[],
        list2:[],
        list3:[],
        list4:[],
        list5:[]
      }
    },
    mounted(){
		this.getList(54,3);
		this.getList(55,10);
		this.getList(56,10);
		this.getList(57,10);
		this.getList(58,1);
		this.getList(59,4);
	},
	methods:{
		getList:function(adid ,limit){
	  		this.$http({
					url: this.requestAddr+'/GetJson/get/adshow?adid='+adid+"&limit="+limit,
					method: 'JSONP',
				    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
					jsonp: 'callbackparam'
				}).then(res => {
					/*console.log(res.data);*/
					if(res.data != null){
						if(adid == 54){this.banners = res.data;}
						if(adid == 55){this.list1 = res.data;}
						if(adid == 56){this.list2 = res.data;}
						if(adid == 57){this.list3 = res.data;}
						if(adid == 58){this.list4 = res.data;}
						if(adid == 59){this.list5 = res.data;}
					}
				}).catch()
		}
	}
  }
</script>

<style scoped lang="less">
  .yingmoo-media {
    width: 100%;
    background-color: #f3f9ff;
    .ym-lunbo {
      width: 100%;
      height: 450px;
      position: absolute;
      top: 234px;
      left: 0;
      z-index: 1;
    }
    .yingmoo-template-model {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
        .column-citys {
          line-height: 44px;
          width: 350px;
          background: none;
          color: #999999;
          margin-right: 30px;
          float: right;
          span {
            padding-left: 15px;
            padding-right: 20px;
            font-size: 14px;
          }
        }
      }
      .column-content {
        width: 1200px;
        background-color: transparent;
        display: flex;
        justify-content: space-between;
        .media-annimation {
          margin-top: 20px;
        }
        .media-model {
          width: 224px;
          height: 291px;
          margin-top: 20px;
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
          }
          .media-text-first {
            font-size: 14px;
            padding-top: 9px;
            overflow: hidden;
            text-overflow : clip;
            padding-left: 10px;
          }
          .media-text-secend {
            padding-left: 10px;
            font-size: 12px;
            color: red;
          }
          .media-text-city {
            padding-left: 10px;
            font-size: 12px;
            color: #999999;
            padding-bottom: 6px;
          }
        }
      }
    }
    .yingmoo-template {
      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 247px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
      }
      .column-content {
        width: 1200px;
        background-color: transparent;
        display: flex;
        justify-content: space-between;
        .media-model {
          width: 224px;
          height: 291px;
          margin-top: 20px;
          dd {
            background-color: white;
            height: 24px;
            line-height: 24px;
            padding-left: 10px;
          }
          .media-text-first {
            font-size: 15px;
            padding-top: 9px;
            overflow: hidden;
            text-overflow : clip;
          }
          .media-text-secend {
            font-size: 12px;
            color: red;
          }
          .media-text-city {
            font-size: 12px;
            color: #999999;
            padding-bottom: 6px;
          }
        }
      }
    }
    .yingmoo-airport{
      width: 1200px;
      margin: 0 auto;
      margin-top: 25px;
      .airport-model{
        height: 460px;
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: white;
        .airport-map{
          width: 461px;
          height: 380px;
        }
        .airport-pictures{
          width: 590px;
          height: 402px;
          :nth-child(even){
            margin-left: 13px;
          }
          :nth-child(3){
            margin-top: 17px;
          }
        }
      }
    }
  }

</style>
